<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    #wb{
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 9999;
    }
    #wb-content{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 280px;
      height: 160px;
      background-color: wheat;
      text-align: center;
    }

  </style>

</head>
<body>


<button id="savEntity">
  新增
</button>

<div id = "wb">
  <div id = "wb-content">
    <label>
      <input type="text" placeholder="编号"/>
    </label>
    <label>
      <input type="text" placeholder="名字"/>
    </label>
    <div>
      <button id="saveSubmit">保存</button>
    </div>
  </div>
</div>

<script>
  //点击按钮
  document.getElementById('savEntity').onclick = function (){
    console.log("savEntity")
    document.getElementById('wb').style.display = 'block';
  }
  //保存按钮关闭遮罩层
  document.getElementById('saveSubmit').onclick = function (){
    document.getElementById('wb').style.display = 'none';
  }
  //如果是空白部分，this,不是遮罩层，直接就关闭
  document.getElementById('wb').onclick = function (event){
    if (event.target === this){
      this.style.display = 'none';
    }
  }
</script>

</body>
</html>